<template>
  <div class="product-detail-page">
    <Header :scroll="scroll" />
    <!-- 产品展示区域 -->
    <div class="product-showcase container">
      <div class="product-gallery">
        <div class="main-image">
          <img :src="proxy.$buildUrl(product.mainImage)" :alt="product.title" />
        </div>
        <div class="thumbnail-slider">
          <div class="slider-arrow left" @click="prevImage">
            <el-icon>
              <ArrowLeft />
            </el-icon>
          </div>
          <div class="thumbnails">
            <div
              v-for="(image, index) in product.main_images"
              :key="index"
              class="thumbnail"
              :class="{ active: currentImageIndex === index }"
              @click="selectImage(index)">
              <img :src="proxy.$buildUrl(image.url)" :alt="`${product.spu_name} - 图片${index + 1}`" />
            </div>
          </div>
          <div class="slider-arrow right" @click="nextImage">
            <el-icon>
              <ArrowRight />
            </el-icon>
          </div>
        </div>
      </div>

      <div class="product-info">
        <h1 class="product-title">{{ product.spu_name }}</h1>

        <div class="price-row">
          <span class="price-label">价格</span>
          <span class="price-value">¥{{ unit_price }}</span>
        </div>

        <!-- <div class="activity-row">
          <span class="activity-label">活动</span>
          <span class="activity-text">618活动全城8折</span>
        </div> -->

        <div class="spec-row">
          <span class="spec-label">规格</span>
          <div class="spec-options">
            <button
              v-for="(spec, index) in product.skuArray"
              :key="index"
              class="spec-option"
              :class="{ active: selectedSpec === index }"
              @click="selectSpecItem(index)">
              {{ spec.sku_name }}
            </button>
          </div>
        </div>

        <div class="delivery-row">
          <span class="delivery-label">配送方式</span>
          <div class="delivery-options">
            <button class="delivery-option" :class="{ active: deliveryMethod === 1 }" @click="deliveryMethod = 1">快递寄送</button>
            <button class="delivery-option" :class="{ active: deliveryMethod === 2 }" @click="deliveryMethod = 2">门店自提</button>
          </div>
        </div>

        <div class="shipping-row" v-if="defaultAddress.id && defaultAddress.id !== ''">
          <span class="shipping-label">发货</span>
          <span class="shipping-info">配送至：{{ defaultAddress.city.name }}{{ defaultAddress.town.name }} | 普通快递：{{ shippingFee }} 元</span>
          <span class="shipping-info" style="margin-left: 8px">| {{ shippingDesc }}</span>
        </div>

        <div class="quantity-row">
          <span class="quantity-label">数量</span>
          <div class="quantity-controls">
            <button class="quantity-btn" @click="decreaseQuantity">-</button>
            <input type="number" v-model="quantity" class="quantity-input" :min="product.minimum_per_order" :max="product.maximum_per_order" />
            <button class="quantity-btn" @click="increaseQuantity">+</button>
          </div>
        </div>

        <div class="action-buttons" v-if="!isMobile">
          <button class="buy-now-btn" @click="buyNow">立即购买</button>
          <button class="add-cart-btn" @click="addToCart">加入购物车</button>
        </div>
      </div>
    </div>

    <!-- 推荐商品区域 - 桌面端侧边栏 -->
    <div class="flex justify-start items-start">
      <div class="recommended-products desktop-recommended">
        <h3 class="recommended-title">推荐商品</h3>

        <div class="recommended-arrow up" @click="scrollRecommendedUp">
          <svg width="20" height="12" viewBox="0 0 20 12" fill="none">
            <path d="M10 0L20 12H0L10 0Z" fill="#999" />
          </svg>
        </div>

        <div class="recommended-list" ref="recommendedList">
          <div class="recommended-item" v-for="(item, index) in recommendedProducts" :key="index">
            <div class="recommended-image">
              <img :src="proxy.$buildUrl(item.white_back_ground_pic_url)" :alt="item.spu_name" />
            </div>
            <div class="recommended-info">
              <div class="recommended-item-title">{{ item.spu_name }}</div>
            </div>
          </div>
        </div>

        <div class="recommended-arrow down" @click="scrollRecommendedDown">
          <svg width="20" height="12" viewBox="0 0 20 12" fill="none">
            <path d="M10 12L0 0H20L10 12Z" fill="#999" />
          </svg>
        </div>
      </div>

      <!-- 产品参数区域 -->
      <div class="flex flex-col justify-start items-start w-full">
        <!-- 移动端推荐商品区域 -->
        <div class="mobile-recommended-section">
          <h4 class="mobile-recommended-title">推荐产品</h4>
          <div class="mobile-recommended-grid">
            <div class="mobile-recommended-item" v-for="(item, index) in recommendedProducts" :key="index">
              <div class="mobile-recommended-card">
                <div class="mobile-recommended-image">
                  <img :src="proxy.$buildUrl(item.white_back_ground_pic_url)" :alt="item.spu_name" />
                </div>
                <div class="mobile-recommended-info">
                  <div class="mobile-recommended-item-title">{{ item.spu_name }}</div>
                  <div class="mobile-recommended-price-row">
                    <span class="mobile-recommended-price">¥{{ item.price_min }}</span>
                    <button class="mobile-recommended-add-btn" @click="addRecommendedToCart(item)">
                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                        <path d="M8 1V15M1 8H15" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="product-params-section container">
          <div class="params-section-header" @click="toggleParams">
            <h4 class="params-section-title">产品参数</h4>
            <div class="params-toggle-icon" :class="{ expanded: isParamsExpanded }">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                <path d="M4 6L8 10L12 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </div>
          </div>

          <div class="params-content" :class="{ expanded: isParamsExpanded }">
            <div class="params-grid">
              <div class="params-row">
                <div class="param-item" v-for="(param, index) in product.property_json" :key="index">
                  <block v-if="param.property_value && param.property_value !== ''">
                    <span class="param-label">{{ param.property_name }}：</span>
                    <span class="param-value">{{ param.property_value }}</span>
                  </block>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="product-params-section container">
          <h4 class="params-section-title">产品详情</h4>
          <img v-for="(image, index) in product.desc_images" :key="index" :src="proxy.$buildUrl(image.url)" :alt="index" style="width: 100%" />
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <Footer v-if="!isMobile" />

    <!-- 底部功能区 -->
    <div class="bottom-action-bar">
      <div class="action-bar-container">
        <!-- 左侧功能按钮 -->
        <div class="action-left">
          <div class="action-item" @click="this.$router.back()">
            <div class="action-icon">
              <img src="@/assets/navbar/cate.png" alt="" />
            </div>
            <span class="action-label">返回</span>
          </div>

          <div class="action-item" @click="goHome">
            <div class="action-icon">
              <img src="@/assets/navbar/home.png" alt="" />
            </div>
            <span class="action-label">首页</span>
          </div>

          <div class="action-item" @click="goService">
            <div class="action-icon">
              <img src="@/assets/navbar/service.png" alt="" />
            </div>
            <span class="action-label">服务</span>
          </div>

          <div class="action-item" @click="goCart">
            <div class="action-icon">
              <img src="@/assets/images/购物车.png" alt="" />
            </div>
            <span class="action-label">购物车</span>
          </div>
        </div>

        <!-- 右侧操作按钮 -->
        <div class="action-right">
          <button class="add-cart-action-btn" @click="addToCart">加入购物车</button>
          <button class="buy-now-action-btn" @click="buyNow">立即购买</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { getCurrentInstance, ref, computed, onMounted } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'

  import Header from '@/components/Header.vue'
  import Footer from '@/components/Footer.vue'

  import { useUserStore } from '@/stores/user.js'
  import apiGood from '@/api/modules/good'
  import apiOrder from '@/api/modules/order'
  import apiUser from '@/api/modules/user'

  const route = useRoute()
  const router = useRouter()
  const userStore = useUserStore()
  const { proxy } = getCurrentInstance()
  const productId = ref(route.query.id ? route.query.id : '')

  // 从store获取用户状态（保持响应性）
  const isLoggedIn = computed(() => userStore.isLoggedIn)
  const userInfo = computed(() => userStore.userInfo)
  // 产品详情
  const product = ref({})
  // 默认地址
  const defaultAddress = ref({})
  // 选中的规格
  const selectedSpec = ref(0)
  // 当前价格
  const unit_price = ref(0)
  // 购买数量
  const quantity = ref(1)
  // 配送方式
  const deliveryMethod = ref(1)
  // 当前激活的选项卡
  const activeTab = ref('detail')
  // 产品参数展开状态
  const isParamsExpanded = ref(false)
  // 推荐商品数据
  const recommendedProducts = ref([])
  // 当前选中的图片索引
  const currentImageIndex = ref(0)
  // 运费信息
  const shippingFee = ref(0)
  const freeDelivery = ref(false)
  const limitDelivery = ref(false)
  const shippingDesc = ref('')

  // 初始化
  onMounted(() => {
    loadDataInfo()
    loadRecommend()
  })

  const loadDataInfo = () => {
    apiGood.GetProductInfo({ id: productId.value }).then(async (res) => {
      product.value = res.data
      // 商品SPU数组对象字段
      // 使用reduce找到具有最小custom_price_cny的项
      let minItem = product.value.skuArray.reduce((prev, current) => {
        return prev.custom_price_cny <= current.custom_price_cny ? prev : current
      }, product.value.skuArray[0]) // 初始值设置为数组的第一个元素
      if (minItem) {
        selectedSpec.value = product.value.skuArray.indexOf(minItem)
        unit_price.value = minItem.custom_price_cny
      } else {
        selectedSpec.value = 0
        unit_price.value = product.value.skuArray[0].custom_price_cny
      }
      product.value.main_images = proxy.$parseJsonObject(product.value.main_images) || []
      product.value.desc_images = proxy.$parseJsonObject(product.value.desc_images) || []
      product.value.attribute_json = proxy.$parseJsonObject(product.value.attribute_json) || []
      product.value.property_json = proxy.$parseJsonObject(product.value.property_json) || []
      product.value.sku_property_json = proxy.$parseJsonObject(product.value.sku_property_json) || []
      product.value.platform_attrs = proxy.$parseJsonObject(product.value.platform_attrs) || []
      product.value.after_sale_service = proxy.$parseJsonObject(product.value.after_sale_service) || []
      if (product.value.main_images && product.value.main_images.length > 0) {
        product.value.mainImage = product.value.main_images[0].url
      }
      // 规格属性
      product.value.skuArray.forEach((skuitem) => {
        skuitem.property_json = proxy.$parseJsonObject(skuitem.property_json)
        skuitem.package_sku = proxy.$parseJsonObject(skuitem.package_sku)
      })

      // 计算运费
      userDefaultAddress()
    })
  }

  const userDefaultAddress = () => {
    if (isLoggedIn.value) {
      apiUser.GetDefaultAddress().then(async (res) => {
        defaultAddress.value = res.data
        defaultAddress.value.mobile = proxy.$decryptAES(defaultAddress.value.mobile)
        defaultAddress.value.address = proxy.$decryptAES(defaultAddress.value.address)
        defaultAddress.value.province = proxy.$parseJsonObject(defaultAddress.value.province)
        defaultAddress.value.city = proxy.$parseJsonObject(defaultAddress.value.city)
        defaultAddress.value.town = proxy.$parseJsonObject(defaultAddress.value.town)
        defaultAddress.value.street = proxy.$parseJsonObject(defaultAddress.value.street)
        calculateFreight()
      })
    }
  }

  const calculateFreight = () => {
    // 根据运费模板和收货地址计算运费
    if (!(defaultAddress.value && defaultAddress.value.id > 0)) {
      return
    }
    if (!(product.value.freight_template && product.value.freight_template.id > 0)) {
      return
    }
    shippingFee.value = 0
    freeDelivery.value = false
    shippingDesc.value = ''
    const province = defaultAddress.value.province
    const city = defaultAddress.value.city
    const town = defaultAddress.value.town
    const goodAmount = unit_price.value * quantity.value
    const totalWeight = parseFloat(product.value.skuArray[selectedSpec.value].weight) * quantity.value
    const totalVolume = parseFloat(product.value.skuArray[selectedSpec.value].volume) * quantity.value

    // 计价方式：1-按重量 2-按件数 3-按体积
    const calculate_type = product.value.freight_template.calculate_type
    // 运费类型-0:阶梯计价 1:固定运费 2:卖家包邮 3:货到付款
    const freight_rule_type = product.value.freight_template.rule_type
    // 规则类型（1:默认运费；2:指定地区运费；3:指定条件包邮；4:指定限售地区）
    let ruleArray = product.value.freight_template.ruleArray
    ruleArray.forEach((item) => {
      item.rule_address = proxy.$parseJsonObject(item.rule_address)
      item.rule_address.forEach((pcs) => {
        const ii = item.rule_address.findIndex((o) => o.code !== pcs.code && o.code.startsWith(pcs.code))
        if (ii >= 0) {
          pcs.hasChildren = true
        } else {
          pcs.hasChildren = false
        }
      })
      const new_rule_address = item.rule_address.filter((pcs) => !pcs.hasChildren)
      item.rule_address = new_rule_address // 只保留末级节点
    })

    // step1. 限售地区 [{ "code": "32", "name": "江苏省" }]
    limitDelivery.value = false
    const limitArea = ruleArray.filter((item) => item.rule_type === 4)
    if (limitArea && limitArea.length > 0) {
      limitArea.forEach((item) => {
        const index1 = item.rule_address.findIndex((node) => node.code === province.code || node.name === province.name)
        const index2 = item.rule_address.findIndex((node) => node.code === city.code || node.name === city.name)
        const index3 = item.rule_address.findIndex((node) => node.code === town.code || node.name === town.name)
        if (index1 >= 0 || index2 >= 0 || index3 >= 0) {
          limitDelivery.value = true
        }
      })
    }
    if (limitDelivery.value) {
      shippingFee.value = 0
      shippingDesc.value = '限售'
      return
    }
    // step2. 卖家包邮 或 货到付款
    if (freight_rule_type >= 2) {
      freeDelivery.value = true
      shippingFee.value = 0
      shippingDesc.value = '卖家包邮'
      return
    }
    // step3. 指定条件包邮
    freeDelivery.value = false
    const baoyouArea = ruleArray.filter((item) => item.rule_type === 3)
    if (baoyouArea && baoyouArea.length > 0) {
      baoyouArea.forEach((item) => {
        const index1 = item.rule_address.findIndex((node) => node.code === province.code || node.name === province.name)
        const index2 = item.rule_address.findIndex((node) => node.code === city.code || node.name === city.name)
        const index3 = item.rule_address.findIndex((node) => node.code === town.code || node.name === town.name)
        if (index1 >= 0 || index2 >= 0 || index3 >= 0) {
          // 满xx包邮 计量单位（1-元 2-kg 3-cm³）
          if (item.over_danwei === 1 && goodAmount >= item.over_number) {
            freeDelivery.value = true
          } else if (item.over_danwei === 2 && totalWeight >= item.over_number) {
            freeDelivery.value = true
          } else if (item.over_danwei === 2 && totalVolume >= item.over_number) {
            freeDelivery.value = true
          }

          if (freeDelivery.value) {
            shippingDesc.value =
              '满' + ruleitem.over_number + (ruleitem.over_danwei === 1 ? '元' : ruleitem.over_danwei === 2 ? 'kg' : 'cm³') + '，包邮'
          }
        }
      })
    }
    if (freeDelivery.value) {
      shippingFee.value = 0
      return
    }
    // step4. 指定地区计算邮费（取最高）
    let isCharging = false
    let maxChargingFreight = 0
    const chargingArea = ruleArray.filter((item) => item.rule_type === 2)
    if (chargingArea && chargingArea.length > 0) {
      chargingArea.forEach((item) => {
        const index1 = item.rule_address.findIndex((node) => node.code === province.code || node.name === province.name)
        const index2 = item.rule_address.findIndex((node) => node.code === city.code || node.name === city.name)
        const index3 = item.rule_address.findIndex((node) => node.code === town.code || node.name === town.name)
        if (index1 >= 0 || index2 >= 0 || index3 >= 0) {
          isCharging = true
          // 阶梯计费 或 固定运费 calculate_type 计价方式：1-按重量 2-按件数 3-按体积
          let basicValue = 0
          let thisChargingFreight = 0
          if (calculate_type === 1) {
            basicValue = totalWeight
          } else if (calculate_type === 2) {
            basicValue = quantity.value
          } else {
            basicValue = totalVolume
          }
          if (freight_rule_type === 0) {
            thisChargingFreight = item.first_price
            basicValue -= parseFloat(item.first_unit)
            if (basicValue > 0 && parseFloat(item.add_unit) > 0) {
              // 向上取整
              thisChargingFreight += Math.ceil(basicValue / parseFloat(item.add_unit)) * parseFloat(item.add_price)
            }
          } else if (freight_rule_type === 1) {
            thisChargingFreight = item.fixed_amount
          }

          if (thisChargingFreight > maxChargingFreight) {
            maxChargingFreight = thisChargingFreight
          }
        }
      })
    }
    if (isCharging) {
      if (maxChargingFreight > shippingFee.value) {
        shippingFee.value = maxChargingFreight
      }
      return
    }

    // step5. 默认运费规则（取最高）
    let maxDefaultFreight = 0
    const defaultArea = ruleArray.filter((item) => item.rule_type === 1)
    if (defaultArea && defaultArea.length > 0) {
      defaultArea.forEach((item) => {
        // 阶梯计费 或 固定运费 calculate_type 计价方式：1-按重量 2-按件数 3-按体积
        let basicValue = 0
        let thisDefaultFreight = 0
        if (calculate_type === 1) {
          basicValue = totalWeight
        } else if (calculate_type === 2) {
          basicValue = quantity.value
        } else {
          basicValue = totalVolume
        }
        if (freight_rule_type === 0) {
          thisDefaultFreight = item.first_price
          basicValue -= parseFloat(item.first_unit)
          if (basicValue > 0 && parseFloat(item.add_unit) > 0) {
            // 向上取整
            thisDefaultFreight += Math.ceil(basicValue / parseFloat(item.add_unit)) * parseFloat(item.add_price)
          }
        } else if (freight_rule_type === 1) {
          thisDefaultFreight = item.fixed_amount
        }

        if (thisDefaultFreight > maxDefaultFreight) {
          maxDefaultFreight = thisDefaultFreight
        }
      })
    }
    if (maxDefaultFreight > shippingFee.value) {
      shippingFee.value = maxDefaultFreight
    }
  }

  const loadRecommend = () => {
    apiGood.GetProductList({ page: 1, limit: 6, group_id: product.value.group_id }).then(async (res) => {
      recommendedProducts.value = res.data
    })
  }

  const selectSpecItem = (index) => {
    // 选择商品规格
    selectedSpec.value = index
    unit_price.value = product.value.skuArray[index].custom_price_cny
  }

  // 选择图片
  const selectImage = (index) => {
    currentImageIndex.value = index
    product.value.mainImage = product.value.main_images[index].url
  }

  // 上一张图片
  const prevImage = () => {
    if (currentImageIndex.value > 0) {
      selectImage(currentImageIndex.value - 1)
    } else {
      selectImage(product.value.main_images.length - 1)
    }
  }

  // 下一张图片
  const nextImage = () => {
    if (currentImageIndex.value < product.value.main_images.length - 1) {
      selectImage(currentImageIndex.value + 1)
    } else {
      selectImage(0)
    }
  }

  // 数量控制方法
  const increaseQuantity = () => {
    if (quantity.value < 99) {
      quantity.value++
    }
  }

  const decreaseQuantity = () => {
    if (quantity.value > 1) {
      quantity.value--
    }
  }

  // 推荐商品滚动方法
  const recommendedList = ref(null)

  const scrollRecommendedUp = () => {
    if (recommendedList.value) {
      recommendedList.value.scrollBy({
        top: -200,
        behavior: 'smooth',
      })
    }
  }

  const scrollRecommendedDown = () => {
    if (recommendedList.value) {
      recommendedList.value.scrollBy({
        top: 200,
        behavior: 'smooth',
      })
    }
  }

  // 底部功能区方法
  const goHome = () => {
    router.push('/')
  }

  const goService = () => {
    // 可以跳转到客服页面或显示客服弹窗
    // 复制小程序路径（如 pages/contact/index），并生成 URL Scheme（在微信开放平台生成）

    // 判断是否在微信内
    const isWeixin = /MicroMessenger/i.test(navigator.userAgent)
    if (isWeixin) {
      // 引导用户跳转小程序客服
      window.location.href = 'weixin://dl/business/?t=pages/user/user'
    } else {
      ElMessage.warning('请在微信内打开')
    }
  }

  const goCart = () => {
    if (isLoggedIn.value) {
      router.push('/cart')
    } else {
      router.push('/login')
    }
  }

  const addToCart = () => {
    if (isLoggedIn.value) {
      apiOrder
        .AddShoppingCart({
          spu_id: product.value.id,
          sku_id: product.value.skuArray[selectedSpec.value].id,
          shop_id: product.value.skuArray[selectedSpec.value].shop_id,
          store_id: product.value.skuArray[selectedSpec.value].store_id,
          receive_type: deliveryMethod.value === 'pickup' ? 2 : 1,
          quantity: quantity.value,
          unit_price: unit_price.value,
          tax_rate: 0,
        })
        .then(async (res) => {
          ElMessage.success('成功加入购物车')
        })
    } else {
      router.push('/login')
    }
  }

  const buyNow = () => {
    if (isLoggedIn.value) {
      // 滚动到顶部
      window.scrollTo(0, 0)
      // 立即购买逻辑
      router.push({
        path: '/order-payment',
        query: {
          skuId: product.value.skuArray[selectedSpec.value].id,
          quantity: quantity.value,
          deliveryType: deliveryMethod.value,
        },
      })
    } else {
      router.push('/login')
    }
  }

  // 推荐产品添加到购物车
  const addRecommendedToCart = (item) => {
    // window.scrollTo(0, 0)
    // router.push({
    //   path: '/detail',
    //   query: {
    //     id: item.id,
    //   },
    // })

    // 先通过路由器的resolve方法解析出目标路由的URL
    const route = router.resolve({ path: '/detail', query: { id: item?.id } })
    // 然后使用window.open打开新窗口
    window.open(route.href, '_blank')
  }

  // 切换产品参数展开状态
  const toggleParams = () => {
    isParamsExpanded.value = !isParamsExpanded.value
  }

  const scroll = ref(false)
  window.addEventListener('scroll', () => {
    // 顶部
    scroll.value = window.scrollY > 0
  })

  const goBack = () => {
    this.$router.back()
    // router.go(-1)
  }

  const isMobile = ref(false)
  const deviceInfo = ref({
    type: '',
    os: '',
    browser: '',
    screenWidth: 0,
  })
  const getDeviceInfo = () => {
    const userAgent = navigator.userAgent.toLowerCase()
    const screenWidth = window.innerWidth

    // 检测操作系统
    let os = 'Unknown'
    if (userAgent.includes('android')) os = 'Android'
    else if (userAgent.includes('iphone') || userAgent.includes('ipad')) os = 'iOS'
    else if (userAgent.includes('windows')) os = 'Windows'
    else if (userAgent.includes('mac')) os = 'macOS'
    else if (userAgent.includes('linux')) os = 'Linux'

    // 检测浏览器
    let browser = 'Unknown'
    if (userAgent.includes('chrome')) browser = 'Chrome'
    else if (userAgent.includes('firefox')) browser = 'Firefox'
    else if (userAgent.includes('safari')) browser = 'Safari'
    else if (userAgent.includes('edge')) browser = 'Edge'

    // 检测设备类型
    let type = 'Desktop'
    if (userAgent.includes('mobile') || screenWidth <= 768) type = 'Mobile'
    else if (userAgent.includes('tablet') || (screenWidth > 768 && screenWidth <= 1024)) type = 'Tablet'

    deviceInfo.value = { type, os, browser, screenWidth }

    return { type, os, browser, screenWidth }
  }

  // 检测是否为移动设备
  const checkMobile = () => {
    const { type, screenWidth } = getDeviceInfo()
    const userAgent = navigator.userAgent.toLowerCase()

    // 更精确的移动设备检测
    const mobileKeywords = ['mobile', 'android', 'iphone', 'ipod', 'blackberry', 'windows phone']
    const tabletKeywords = ['ipad', 'tablet']

    const isMobileDevice = mobileKeywords.some((keyword) => userAgent.includes(keyword))
    const isTabletDevice = tabletKeywords.some((keyword) => userAgent.includes(keyword))
    const isSmallScreen = screenWidth <= 768
    const isMediumScreen = screenWidth > 768 && screenWidth <= 1024

    // 移动设备或小屏幕显示移动端界面
    // 平板设备根据屏幕宽度决定
    isMobile.value = isMobileDevice || isSmallScreen || (isTabletDevice && isMediumScreen)
  }
  checkMobile()
</script>

<style scoped>
  .product-detail-page {
    max-width: 1200px;
    margin: auto;
    background-color: white;
    width: 100%;
  }

  /* 产品展示区域 */
  .product-showcase {
    display: flex;
    margin: 30px auto;
    gap: 40px;
    padding: 0 20px;
  }

  .product-gallery {
    width: 45%;
    min-width: 0;
  }

  .main-image {
    width: 100%;
    max-width: 540px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }

  .main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .thumbnail-slider {
    display: flex;
    align-items: center;
  }

  .slider-arrow {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    cursor: pointer;
  }

  .thumbnails {
    display: flex;
    gap: 10px;
    flex: 1;
    overflow-x: auto;
    padding: 0 10px;
    overflow-y: hidden;
  }

  .thumbnail {
    width: 80px;
    height: 80px;
    border: 1px solid #ddd;
    padding: 2px;
    cursor: pointer;
  }

  .thumbnail.active {
    border-color: #1e8e3e;
  }

  .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .product-info {
    flex: 1;
  }

  .product-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 30px;
    line-height: 1.4;
  }

  /* 价格行 */
  .price-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .price-label {
    width: 80px;
    font-size: 14px;
    color: #666;
  }

  .price-value {
    font-size: 32px;
    color: #ff6600;
    font-weight: bold;
  }

  /* 活动行 */
  .activity-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .activity-label {
    width: 80px;
    font-size: 14px;
    color: #666;
  }

  .activity-text {
    font-size: 14px;
    color: #333;
  }

  /* 规格行 */
  .spec-row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
  }

  .spec-label {
    width: 80px;
    font-size: 14px;
    color: #666;
    line-height: 36px;
  }

  .spec-options {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .spec-option {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .spec-option.active {
    border-color: #52a58a;
    color: #52a58a;
  }

  .spec-option:hover {
    border-color: #52a58a;
  }

  /* 配送方式行 */
  .delivery-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .delivery-label {
    width: 80px;
    font-size: 14px;
    color: #666;
  }

  .delivery-options {
    display: flex;
    gap: 10px;
  }

  .delivery-option {
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: white;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .delivery-option.active {
    border-color: #52a58a;
    color: #52a58a;
  }

  .delivery-option:hover {
    border-color: #52a58a;
  }

  /* 发货行 */
  .shipping-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }

  .shipping-label {
    width: 80px;
    font-size: 14px;
    color: #666;
  }

  .shipping-info {
    font-size: 14px;
    color: #333;
  }

  /* 数量行 */
  .quantity-row {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
  }

  .quantity-label {
    width: 80px;
    font-size: 14px;
    color: #666;
  }

  .quantity-controls {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
  }

  .quantity-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: #f5f5f5;
    color: #333;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .quantity-btn:hover {
    background: #e0e0e0;
  }

  .quantity-input {
    width: 60px;
    height: 36px;
    border: none;
    text-align: center;
    font-size: 14px;
    outline: none;
  }

  /* 操作按钮 */
  .action-buttons {
    display: flex;
    gap: 15px;
  }

  .buy-now-btn {
    padding: 12px 30px;
    background: #1c705e;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .buy-now-btn:hover {
    background: #459a7e;
  }

  .add-cart-btn {
    padding: 12px 30px;
    background: #999;
    color: white;
    border: none;
    border-radius: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .add-cart-btn:hover {
    background: #777;
  }

  /* 推荐商品区域 - 桌面端 */
  .desktop-recommended {
    width: 200px;
    border-radius: 8px;
    padding: 0 15px;
    z-index: 100;
  }

  /* 移动端推荐商品区域 */
  .mobile-recommended-section {
    display: none;
    width: 100%;
  }

  .mobile-recommended-title {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
    font-weight: 600;
    text-align: left;
  }

  .mobile-recommended-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }

  .mobile-recommended-item {
    background: white;
    border-radius: 8px;
    overflow: hidden;
  }

  .mobile-recommended-card {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  .mobile-recommended-image {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
  }

  .mobile-recommended-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
  }

  .mobile-recommended-info {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .mobile-recommended-item-title {
    font-size: 12px;
    color: #333;
    margin-bottom: 8px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobile-recommended-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .mobile-recommended-price {
    font-size: 14px;
    color: #ff6600;
    font-weight: 600;
  }

  .mobile-recommended-add-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ff6600;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
  }

  .mobile-recommended-add-btn:hover {
    background: #e55a00;
    transform: scale(1.1);
  }

  .mobile-recommended-add-btn:active {
    transform: scale(0.95);
  }

  .mobile-recommended-badge {
    font-size: 10px;
    color: #e53935;
    background: #fff;
    padding: 2px 6px;
    border-radius: 8px;
    display: inline-block;
    border: 1px solid #e53935;
    margin-top: 4px;
  }

  .recommended-title {
    font-size: 16px;
    color: #333;
    text-align: left;
    margin: 0 0 20px 0;
    font-weight: normal;
    background-color: #f6f7f8;
    padding: 5px;
  }

  .recommended-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }

  .recommended-arrow:hover {
    opacity: 0.7;
  }

  .recommended-arrow.up {
    margin-bottom: 15px;
  }

  .recommended-arrow.down {
    margin-top: 15px;
  }

  .recommended-list {
    max-height: 400px;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .recommended-list::-webkit-scrollbar {
    display: none;
  }

  .recommended-item {
    margin-bottom: 20px;
    text-align: center;
  }

  .recommended-item:last-child {
    margin-bottom: 0;
  }

  .recommended-image {
    width: 100%;
    height: 120px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 4px;
  }

  .recommended-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .recommended-info {
    text-align: center;
  }

  .recommended-item-title {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    line-height: 1.3;
  }

  .recommended-badge {
    font-size: 12px;
    color: #e53935;
    background: #fff;
    padding: 2px 8px;
    border-radius: 10px;
    display: inline-block;
    border: 1px solid #e53935;
  }

  /* 产品参数区域 */
  .product-params-section {
    margin: 0 auto 20px;
    padding: 0 30px;
    border-radius: 8px;
  }

  .params-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    background: #f6f7f8;
    padding: 12px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
  }

  .params-section-header:hover {
    background: #e8eaed;
  }

  .params-section-title {
    font-size: 16px;
    color: #333;
    margin: 0;
    font-weight: 500;
  }

  .params-toggle-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: transform 0.3s ease;
  }

  .params-toggle-icon.expanded {
    transform: rotate(180deg);
  }

  .params-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .params-content.expanded {
    max-height: 1000px;
    padding-top: 20px;
  }

  /* 桌面端默认展开 */
  @media (min-width: 769px) {
    .params-section-header {
      cursor: default;
      pointer-events: none;
    }

    .params-toggle-icon {
      display: none;
    }

    .params-content {
      max-height: none;
      overflow: visible;
      padding-top: 20px;
    }
  }

  .params-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .params-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
  }

  .param-item {
    flex: 0 0 30%;
    display: flex;
    align-items: flex-start;
    min-width: 0;
  }

  .param-label {
    font-size: 14px;
    color: #666;
    white-space: nowrap;
    margin-right: 8px;
    min-width: fit-content;
  }

  .param-value {
    font-size: 14px;
    color: #333;
    line-height: 1.4;
    word-wrap: break-word;
    flex: 1;
  }

  /* 产品详情选项卡 */
  .product-tabs {
    margin: 40px auto;
  }

  .tabs-header {
    display: flex;
    border-bottom: 1px solid #eee;
  }

  .tab-item {
    padding: 15px 30px;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    position: relative;
  }

  .tab-item.active {
    color: #1e8e3e;
  }

  .tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1e8e3e;
  }

  .tabs-content {
    padding: 30px 0;
  }

  .product-description {
    margin-bottom: 30px;
  }

  .product-description h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 15px;
  }

  .product-description p {
    line-height: 1.8;
    color: #666;
  }

  .product-images {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .detail-image {
    width: 100%;
    height: auto;
  }

  .params-table {
    width: 100%;
    border-collapse: collapse;
  }

  .params-table tr {
    border-bottom: 1px solid #eee;
  }

  .params-table td {
    padding: 12px;
  }

  .param-name {
    width: 120px;
    color: #666;
    background-color: #f9f9f9;
  }

  .param-value {
    color: #333;
  }

  /* 相关推荐 */
  .related-products {
    margin: 40px auto;
  }

  .section-title {
    font-size: 20px;
    color: #333;
    margin-bottom: 20px;
    position: relative;
    padding-left: 15px;
  }

  .section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 20px;
    background-color: #1e8e3e;
  }

  .related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .related-item {
    border: 1px solid #eee;
    padding: 10px;
    transition: all 0.3s;
  }

  .related-item:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
  }

  .related-image {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
  }

  .related-image img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .related-title {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .related-price {
    color: #e53935;
    font-weight: bold;
  }

  /* 响应式调整 */
  @media (max-width: 1024px) {
    .product-detail-page {
      padding: 0 20px;
    }

    .product-showcase {
      gap: 30px;
      margin: 20px auto;
    }

    .main-image {
      max-width: 450px;
    }

    .recommended-products {
      width: 180px;
    }

    .related-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 768px) {
    .product-detail-page {
      padding: 0 15px;
    }

    .product-showcase {
      flex-direction: column;
      gap: 30px;
      margin: 20px auto;
      padding: 0;
    }

    .product-gallery {
      width: 100%;
    }

    .main-image {
      max-width: 100%;
      height: auto;
    }

    .thumbnail-slider {
      justify-content: center;
    }

    .thumbnails {
      max-width: 300px;
      justify-content: center;
    }

    .product-info {
      width: 100%;
    }

    .product-title {
      font-size: 18px;
      margin-bottom: 25px;
    }

    .price-value {
      font-size: 28px;
    }

    .spec-options {
      gap: 8px;
    }

    .spec-option {
      padding: 6px 12px;
      font-size: 13px;
    }

    .delivery-options {
      gap: 8px;
    }

    .delivery-option {
      padding: 6px 12px;
      font-size: 13px;
    }

    .action-buttons {
      gap: 10px;
    }

    .buy-now-btn,
    .add-cart-btn {
      flex: 1;
      padding: 12px 20px;
      font-size: 15px;
    }

    /* 推荐商品移动端隐藏桌面端，显示移动端 */
    .desktop-recommended {
      display: none;
    }

    .mobile-recommended-section {
      display: block;
    }

    .mobile-recommended-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .mobile-recommended-image {
      height: 100px;
    }

    .mobile-recommended-info {
      padding: 10px;
    }

    .mobile-recommended-item-title {
      font-size: 11px;
    }

    .mobile-recommended-price {
      font-size: 13px;
    }

    .mobile-recommended-add-btn {
      width: 22px;
      height: 22px;
    }

    /* 产品参数移动端优化 */
    .product-params-section {
      padding: 0;
      margin-bottom: 30px;
    }

    .params-section-header {
      padding: 15px;
      background: #f6f7f8;
      border-radius: 12px;
      margin-bottom: 0;
    }

    .params-section-title {
      font-size: 16px;
      font-weight: 600;
    }

    .params-toggle-icon {
      width: 20px;
      height: 20px;
    }

    .params-content {
      background: white;
      border-radius: 0 0 12px 12px;
      margin-top: -8px;
    }

    .params-content.expanded {
      padding: 20px 15px 15px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .params-row {
      flex-direction: column;
      gap: 15px;
    }

    .param-item {
      flex-direction: column;
      align-items: flex-start;
      gap: 5px;
      padding: 15px;
      background: #f8f9fa;
      border-radius: 8px;
    }

    .param-label {
      margin-right: 0;
      font-weight: 600;
      color: #333;
    }

    .related-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 15px;
    }

    .related-item {
      padding: 15px;
    }

    .related-image {
      height: 120px;
    }
  }

  @media (max-width: 480px) {
    .product-detail-page {
      padding: 0 10px;
    }

    .product-showcase {
      margin: 15px auto;
      gap: 25px;
    }

    .product-title {
      font-size: 16px;
      margin-bottom: 20px;
    }

    .price-row,
    .activity-row,
    .spec-row,
    .delivery-row,
    .shipping-row,
    .quantity-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 15px;
    }

    .price-label,
    .activity-label,
    .spec-label,
    .delivery-label,
    .shipping-label,
    .quantity-label {
      width: auto;
      font-weight: 600;
      color: #333;
    }

    .price-value {
      font-size: 24px;
    }

    .spec-options,
    .delivery-options {
      width: 100%;
      flex-wrap: wrap;
    }

    .spec-option,
    .delivery-option {
      flex: 1;
      min-width: calc(50% - 4px);
      text-align: center;
    }

    .shipping-info {
      font-size: 13px;
      line-height: 1.4;
    }

    .quantity-controls {
      align-self: flex-start;
    }

    .action-buttons {
      flex-direction: column;
      gap: 15px;
      margin-top: 25px;
    }

    .buy-now-btn,
    .add-cart-btn {
      width: 100%;
      padding: 15px;
      font-size: 16px;
    }

    /* 缩略图移动端优化 */
    .thumbnail-slider {
      flex-direction: column;
      gap: 15px;
    }

    .slider-arrow {
      display: none;
    }

    .thumbnails {
      max-width: 100%;
      justify-content: flex-start;
      padding: 0;
    }

    .thumbnail {
      width: 60px;
      height: 60px;
    }

    /* 产品参数超小屏优化 */
    .product-params-section {
      padding: 0;
      margin-bottom: 25px;
    }

    .params-section-header {
      padding: 12px;
    }

    .params-section-title {
      font-size: 15px;
    }

    .params-toggle-icon {
      width: 18px;
      height: 18px;
    }

    .params-content.expanded {
      padding: 15px 10px 10px;
    }

    .param-item {
      padding: 12px;
    }

    .param-label {
      font-size: 13px;
    }

    .param-value {
      font-size: 13px;
    }

    .related-grid {
      grid-template-columns: 1fr;
      gap: 15px;
    }

    .related-item {
      padding: 12px;
    }

    .related-image {
      height: 100px;
    }

    .related-title {
      font-size: 13px;
    }

    .mobile-recommended-title {
      font-size: 16px;
      margin-bottom: 15px;
    }

    .mobile-recommended-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }

    .mobile-recommended-image {
      height: 100px;
    }

    .mobile-recommended-info {
      padding: 8px;
    }

    .mobile-recommended-item-title {
      font-size: 10px;
      margin-bottom: 6px;
    }

    .mobile-recommended-price {
      font-size: 12px;
    }

    .mobile-recommended-add-btn {
      width: 20px;
      height: 20px;
    }

    .mobile-recommended-badge {
      font-size: 8px;
      padding: 1px 3px;
    }
  }

  /* 底部功能区样式 */
  .bottom-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    border-top: 1px solid #e5e5e5;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding-bottom: env(safe-area-inset-bottom);
  }

  .action-bar-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    max-width: 1200px;
    margin: 0 auto;
    gap: 16px;
  }

  .action-left {
    display: flex;
    align-items: center;
    gap: 24px;
  }

  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 4px 8px;
    min-width: 48px;
  }

  .action-item:hover {
    transform: scale(1.05);
  }

  .action-item:active {
    transform: scale(0.95);
  }

  .action-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    margin-bottom: 4px;
    transition: color 0.3s ease;
  }

  .action-item:hover .action-icon {
    color: #1c705e;
  }

  .action-label {
    font-size: 12px;
    color: #666;
    line-height: 1;
    transition: color 0.3s ease;
  }

  .action-item:hover .action-label {
    color: #1c705e;
  }

  .action-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    justify-content: flex-end;
  }

  .add-cart-action-btn {
    background: linear-gradient(135deg, #52a58a, #1c705e);
    color: white;
    border: none;
    border-radius: 25px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    white-space: nowrap;
  }

  .add-cart-action-btn:hover {
    background: linear-gradient(135deg, #459a7e, #155a4a);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(28, 112, 94, 0.3);
  }

  .add-cart-action-btn:active {
    transform: translateY(0);
  }

  .buy-now-action-btn {
    background: white;
    color: #666;
    border: 1px solid #666;
    border-radius: 25px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    white-space: nowrap;
  }

  .buy-now-action-btn:hover {
    background: #1c705e;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(28, 112, 94, 0.3);
  }

  .buy-now-action-btn:active {
    transform: translateY(0);
  }

  /* 为底部功能区预留空间 */
  .product-detail-page {
    padding-bottom: 80px;
  }

  /* 响应式调整 */
  @media (max-width: 768px) {
    .action-bar-container {
      padding: 10px 16px;
      gap: 12px;
    }

    .action-left {
      gap: 16px;
    }

    .action-item {
      min-width: 40px;
      padding: 2px 4px;
    }

    .action-icon {
      width: 20px;
      height: 20px;
      margin-bottom: 2px;
    }

    .action-label {
      font-size: 11px;
    }

    .action-right {
      gap: 8px;
    }

    .add-cart-action-btn,
    .buy-now-action-btn {
      padding: 10px 16px;
      font-size: 13px;
      min-width: 100px;
    }
  }

  @media (max-width: 480px) {
    .action-bar-container {
      padding: 8px 12px;
      gap: 8px;
    }

    .action-left {
      gap: 12px;
    }

    .action-item {
      min-width: 36px;
      padding: 2px;
    }

    .action-icon {
      width: 18px;
      height: 18px;
    }

    .action-label {
      font-size: 10px;
    }

    .action-right {
      gap: 6px;
    }

    .add-cart-action-btn,
    .buy-now-action-btn {
      padding: 8px 12px;
      font-size: 12px;
      min-width: 80px;
      border-radius: 20px;
    }

    .product-detail-page {
      padding-bottom: 70px;
    }
  }
</style>
